<template>
  <div>
    <el-upload
      action="#"
      :http-request="handleSuccess"
      list-type="picture-card"
      :file-list="fileList"
      name="userfile"
      :show-file-list="showFilelist"
      :on-remove="handleRemove"
    >
      <i class="el-icon-plus" v-if="showFilelist"></i>
      <img
        style="margin-top: -1px;margin-left:-1px;width: 150px;height: 150px;border-radius: 6px"
        v-if="dialogImageUrl&&!showFilelist"
        :src="dialogImageUrl"
        class="avatar"
      >
      <i v-if="!dialogImageUrl&&!showFilelist" class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import upload from "@/utils/upload.js";
export default {
  name: "UploadImg",
  props: {
    showFilelist: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default: ()=>{
        return []
      }
    },
    dialogImageUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // dialogImageUrl: '',
    };
  },
  methods: {
    handleSuccess(file) {
      upload(file.file).then(res => {
        if (this.showFilelist) {
          // this.fileList.push({ url: res.url });
          this.$emit("setImg", res.url);
        } else {
          this.$emit("setImg", res.url);
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      // this.fileList=fileList
      let data=[]
      fileList.map(r=>{
        data.push(r.url)
      })
      this.$emit('cover',data)
    },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // },
    // handleAvatarSuccess(res){
    //   if(this.showFilelist){
    //     this.fileList.push({url:res.data})
    //   }else{
    //     this.dialogImageUrl=res.data
    //   }
    //   this.$emit('setImg',res.data)
    //  console.log(this.fileList,123)
    //   this.dialogVisible = true;
    // },
  }
};
</script>
